<template>
	<view class="root-view">
		<view class="wrapper">
			<view class="handCenter">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
			</view>
			<view class="btn-box">
				<view @click="retDraw" class="btn delBtn">重写</view>
				<view @click="saveCanvasAsImg" class="btn saveBtn">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				name:'', //用来区分多个签字
			};
		},
		onLoad({name = ''}) {
			console.log('name',name);
			this.name = name
			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff');
					})
					.exec();
			});
		},
		methods: {
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				//设置canvas背景
				this.setCanvasBg('#fff');
			},

	
			//生成图片
			saveCanvasAsImg() {
				console.log(this.startX,this.startY);
				if(!this.startX || !this.startY){
					uni.showToast({
						title:'请签字',
						icon:'none'
					})
					return
				}
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success:(res)=> {
						uni.$emit('q-sign',{name:this.name,tempFilePath:res.tempFilePath})
						uni.navigateBack({
							delta:1
						})
					}
				});
			},

			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {

				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			}
		}
	};
</script>

<style>
	.root-view {
		background: #f6f6f6;
		height: calc(100vh - 44px);
		display: flex;
		/* align-items: center; */
		justify-content: center;
		padding: 27px;
	}
	.btn-box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.btn{
		width: 177rpx;
		height: 65rpx;
		border-radius: 20rpx;
		background: #fff;
		line-height: 65rpx;
		text-align: center;
		font-weight: 500;
		font-size: 24rpx;
	}
	.delBtn{
		border: 1rpx solid #3238ec;
		color: #333333;
		margin-right: 32rpx;
	}
	.saveBtn{
		background: #3238ec;
		color: #ffffff;
	}
	.handWriting {
		background: #fff;
		width: 680rpx;
		height: 783rpx;
		border-radius: 20rpx;
	}
	.handCenter{
		margin-bottom: 36rpx;
	}
	
</style>
